<template>
  <div class="wrap">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="tabpane">
      <!-- 博客首页标签页 -->
      <el-tab-pane label-width="100px" name="index" class="blogIndex">
        <span slot="label">
          <span class="span-box">
            <span>首页 ：</span>
            <i class="fa fa-home"></i>
          </span>
        </span>
        <div class="left">
          <!-- 博客简介 -->
          <div class="blogWrap" v-for="(item,index) in data" :key="index">
            <router-link to="/detail" class="blogTitle">
              <div @click="setlocal(item)">标题:{{item.title}}</div>
            </router-link>
            <el-row>
              <el-col :span="10">
                <i class="fa fa-clock-o"></i>
                {{item.writeTime.substring(0, 10)}}
              </el-col>
              <el-col :span="7">
                <i class="fa fa-eye"></i>
                {{item.readNum}}
              </el-col>
              <el-col :span="7">
                <i class="fa fa-thumbs-o-up"></i>
                {{item.agreeNum}}
              </el-col>
            </el-row>
          </div>
          <!-- 这是分页 -->
          <div class="block">
            <el-pagination
              layout="prev,pager,next"
              :total="50"
              :page-sizes="[5]"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </div>
        <div class="right">
          <div class="search">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
            <el-button @click="searchBlog" type="primary">
              <i class="fa fa-search"></i>
            </el-button>
          </div>
          <!-- 点击标签跳转到博客详情 -->
          <div class="articleTags">
            <p>
              <i class="fa fa-tags"></i>
            </p>
            <div @click="toDetailBytag">
              <el-tag v-for="(item,index) in tagNames" :key="item.index">{{item.tagName}}</el-tag>
            </div>
          </div>
          <!-- 文章归档 -->
          <div class="block">
            <p>
              <i class="fa fa-calendar"></i>
            </p>
            <el-timeline :reverse="reverse">
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :timestamp="activity.writeTime.substring(0,10)"
              >
                <router-link to="/detail" class="blogTitle">
                  <div @click="setlocalFromTimeline(activity)">{{activity.title}}</div>
                </router-link>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </el-tab-pane>
      <!-- 相册标签页 -->
      <el-tab-pane name="photo">
        <span slot="label">
          <span class="span-box">
            <span>相册 ：</span>
            <i class="fa fa-photo"></i>
          </span>
        </span>
        <!-- 瀑布流插件 -->
        <div id="content">
          <vue-waterfall-easy
            :imgsArr="imgsArr"
            :gap="20"
            :height="800"
            :loadingDotCount="0"
            :imgWidth="180"
          >
            <div slot-scope="props">
              <p v-html="props.value.info"></p>
            </div>
          </vue-waterfall-easy>
        </div>

        <!-- 图片上传插件 -->
        <el-upload
          class="upload-demo"
          action="http://upload-z2.qiniup.com"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :data="postData"
          :on-success="afterSuccessUpload"
        >
          <el-button size="small" class="uoload" type="primary" @click="uploadToDatabase">点击上传</el-button>
        </el-upload>
      </el-tab-pane>
      <!-- 关于 -->
      <el-tab-pane label name="about">
        <span slot="label">
          <span class="span-box">
            <span>关于 ：</span>
            <i class="fa fa-user-circle"></i>
          </span>
        </span>
        <div class="about">
          <img
            class="myImg"
            width="200px"
            height="200px"
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591633641470&di=2cc93c6880d84fb7fc5ff57845ce200f&imgtype=0&src=http%3A%2F%2Fimg1.juimg.com%2F180409%2F355843-1P40910300930.jpg"
            alt
          />
          <div>
              <a href="https://github.com/Helsink-z" class="fa fa-github" style="font-size:36px"></a>
            <el-popover
              placement="top-start"
              width="50"
              trigger="hover"
            >
            <img width="150px" height="100px" src="http://img.haote.com/upload/qrcode/1339/haote31ca2e8f449f4dc0a601feca11584866.png" alt="">
              <span slot="reference">
<i class="fa fa-weixin" style="font-size:36px"></i>
              </span>
            </el-popover>
            <el-popover
              placement="top-start"
              width="50"
              trigger="hover"
            >
            <img width="150px" height="100px" src="http://img0.pconline.com.cn/pconline/1403/10/4412496_03_thumb.jpg" alt="">
              <span slot="reference">
<i class="fa fa-qq" style="font-size:36px"></i>
              </span>
            </el-popover>
          </div>
          <el-divider></el-divider>
          <p class="myIntroduction">
            作者简介:
            Hi,everyone!Letmeintroducemyself.
            Let'sknoweachother.
            IwasborninLiaoning.Liaoningisabeautifulplace.
            TherearemanyplacesofinterestinLiaoning.
            IwasbornonSeptember,26th.Iamagirl.
            Iliketraveling,readingandEnglish.
            SpeakingEnglishisveryimportant.
            It'sveryusefulforus.WeshoulddoourbesttolearnEnglish.Ilikemakingfriends,too.
            Iwanttomakemoreandmorefriends.
            Let'sbefriends.WhenIamfree,...”
          </p>
        </div>
      </el-tab-pane>
      <!-- 点击标签显示标签内的博客 -->
      <el-tab-pane label="标签详情" name="tagdetail" class="tagDetailWrap">
        <el-page-header @back="goBack" content></el-page-header>
        <div class="blogWrap" v-for="(item,index) in tagDetail" :key="index">
          <router-link to="/detail" class="blogTitle">
            <!-- <p v-html="item.sort" "></p> -->
            <div @click="setlocal(item)">标题:{{item.title}}</div>
          </router-link>
          <el-row>
            <el-col :span="8">
              <i class="fa fa-clock-o"></i>
              {{item.writeTime.substring(0, 10)}}
            </el-col>
            <el-col :span="8">
              <i class="fa fa-eye"></i>
              :{{item.readNum}}
            </el-col>
            <el-col :span="8">
              <span>
                <i class="fa fa-thumbs-o-up"></i>
                :{{item.agreeNum}}
              </span>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <!-- 跳转到登录页面 -->
      <el-tab-pane label>
        <span slot="label">
          <span class="span-box">
            <span>管理员登录</span>
            <i class="fa fa-sign-in"></i>
          </span>
        </span>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";
import vueWaterfallEasy from "vue-waterfall-easy";
export default {
  data() {
    return {
      data: "", //博客将要展示的内容
      img: "",
      sort: "",
      activeName: "index", //标签页要展示的是哪一页
      imgsArr: [], //相册
      props: "",
      postData: { token: "" },
      myimg: "", //存储七牛里上传的图片路径
      input: "", //搜索框
      searchTags: "",
      loadTags: "", //所有分类标签
      reverse: true, //归档操作
      activities: [], //归档所需数据
      tagDetail: "", //标签详情
      tagNames: "", //标签名
      visible: false,//微信图标hover
    };
  },
  components: {
    vueWaterfallEasy
  },
  created() {
    //获取相册
    axios({
      url: "http://localhost:3000/index/refreshphoto",
      method: "get"
    }).then(response => {
      const that = this;
      response.data.message.map(function(n) {
        that.imgsArr.push(n);
      });
    });

    //获取七牛的token
    axios({
      url: "http://localhost:3000/getuploadtoken",
      method: "get"
    }).then(response => {
      this.postData.token = response.data;
    });
  },
  mounted() {
    //首页默认加载第一页
    axios({
      url: "http://localhost:3000/index/querybypage",
      method: "post",
      data: { page: "1" }
    }).then(response => {
      this.data = response.data.message;
    });
    //加载标签
    axios({
      url: "http://localhost:3000/index/loadtags",
      method: "get"
    }).then(response => {
      this.loadTags = response.data.message;
      const arr = response.data.message;
      const that = this;
      arr.map(function(n) {
        that.activities.push(n);
      });
    });
    //展示标签页
    axios({
      url: "http://localhost:3000/index/gettags",
      method: "get"
    }).then(response => {
      this.tagNames = response.data.message;
    });
  },
  methods: {
    handleRemove(file, fileList) {},
    handlePreview(file) {},
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //图片上传成功后的处理函数
    afterSuccessUpload(res) {
      this.myimg = "http://qbk47ny1r.bkt.clouddn.com/" + res.key;
      this.imgsArr.push({ src: this.myimg });
      localStorage.upload = this.myimg;
    },
    //将相册图片上传到数据库
    uploadToDatabase() {
      setTimeout(() => {
        axios({
          url: "http://localhost:3000/index/uploadtodatabase",
          method: "post",
          data: { src: localStorage.upload }
        }).then(response => {});
      }, 3000);
    },
    //点击标签页处理函数
    handleClick(tab, event) {
      if (tab.index == 4) {
        this.$router.push("detail/login");
      }
    },
    setlocal(item) {
      // localStorage.sort02 = item.sort;
      localStorage.title = item.title;
    },
    setlocalFromTimeline(activity) {
      // localStorage.sort02 = item.sort;
      localStorage.title = activity.title;
    },
    //分页查询
    handleCurrentChange(pageIndex) {
      //要记住这个pageIndex可以获取当前页的index
      axios({
        url: "http://localhost:3000/index/querybypage",
        method: "post",
        data: { page: pageIndex }
      }).then(response => {
        this.data = response.data.message;
      });
    },
    //搜索博客
    searchBlog() {
      axios({
        url: "http://localhost:3000/index/search",
        method: "post",
        data: { title: this.input }
      }).then(response => {
        this.data = response.data.message;
      });
    },
    //根据标签跳转到详情
    toDetailBytag(e) {
      localStorage.sort02 = e.target.innerHTML;
      this.readNum += this.readNum;
      axios({
        url: "http://localhost:3000/index/search",
        method: "post",
        data: { sort: localStorage.sort02 }
      }).then(response => {
        this.tagDetail = response.data.message;
        console.log(this.tagDetail);
        this.activeName = "tagdetail";
      });
    },
    loginToBackStage() {},
    //点赞操作函数
    agree() {
      this.data02.agreeNum = this.data02.agreeNum + 1;
      axios({
        url: "http://localhost:3000/detail/addagree",
        method: "post",
        data: {
          agreeNum: this.data02.agreeNum,
          sort: localStorage.sort02
        }
      }).then(response => {});
    },
    goBack() {
      this.$router.go("/");
    }
  }
};
</script>

<style>
/* 要想改ui插件的原始样式，必须去掉scope才会生效 */
/* .is-top{
   transform: translateX(150px);
} */
.el-tabs__content {
  background: whitesmoke;
  width: 60%;
  margin: 0 auto;
  height: 42rem;
}
.el-tabs__nav-scroll {
  background: whitesmoke;
  width: 60%;
  margin: 0 auto;
}
.administerLogin {
  float: right;
}
.blogIndex {
  display: flex;
  justify-content: space-around;
  margin-top: 3rem;
}
.tagDetailWrap {
  overflow-y: auto;
  height: 100%;
}
.blogWrap {
  width: 25rem;
  height: 8rem;
  margin: 1rem auto;
  background: whitesmoke;
  line-height: 3rem;
}
.blogWrap:hover {
  background: #026271;
}
.left {
  position: relative;
  height: 32rem;
  width: 65%;
}
.left > .block {
  margin: 0 0 1.75rem 0.5rem;
  position: absolute;
  left: 10.5rem;
  bottom: 0.75rem;
}
.right {
  width: 35%;
  height: 32rem;
  line-height: 1rem;
  display: flex;
  flex-direction: column;
  display: block;
  padding: 1rem;
  margin: 0 auto;
}
.right > .block {
  margin-top: 1rem;
  height: 15rem;
}
.right > .block > .el-timeline {
  padding-left: 0;
  height: 15rem;
  overflow: auto;
  width: 15rem;
}
a {
  color: black;
  text-decoration: none;
}
/* 瀑布流 */
.vue-waterfall-easy-container {
  width: 660rem;
  height: 40rem;
  overflow: hidden;
  margin: 0 auto;
  position: fixed;
}
.vue-waterfall-easy-scroll {
  width: 670rem;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.articleTags {
  width: 15rem;
  height: 10rem;
  background: whitesmoke;
}
.myIntroduction {
  text-align: center;
}
.uoload {
  position: absolute;
  right: 10rem;
  top: 10rem;
}
.search {
  width: 15rem;
  height: 2.4rem;
  display: flex;
  margin: 0 10rem 0 0;
}

.articleTags .el-tag {
  margin: 0.25rem;
}
.el-tab-pane > .block {
  padding: 0;
  margin: 0;
}
.about {
  width: 50%;
  margin: 0 auto;
}
.about > img {
  border-radius: 50%;
}
.el-col-7 {
  height: 1rem;
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
/* 归档标签 */
.fa-calendar {
  margin-left: -5.5rem;
}
.fa-github:hover,
.el-tag{
  cursor: pointer;
}
</style>